<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="./css/reset.css">
    <!-- 当前页css -->
    <link rel="stylesheet" href="./css/my-class.css">
    <!-- <link rel="stylesheet" href="./css/animate.css"> -->
</head>
<body>
<!-- 父容器 -->
<div class="container">
    <!-- 顶部头 -->
    <div class="top clearfix">
        <div class="back fl">返回</div>
        <div class="title fl">我的班级</div>
    </div>
    <!-- 设置内容 -->
    <div class="content">
        <!-- 个人信息1 -->
        <ul>
            <!-- <li>
                <div class="class-title">
                    <span>郑州卓有01班</span>
                    <i></i>
                </div>
                班级列表
                <div class="class-list">
                    <ul>
                        <li>
                            <a class="clearfix" href="#">
                                编号
                                <i class="fl"><span>01</span></i>
                                头像
                                <div class="photo fl"></div>
                                昵称
                                <span class="nickname">夏添</span>
                                行业
                                <span class="job">新能源开发与时长推广</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </li> -->
            <!-- <li>
                <div class="class-title">
                    <span>郑州卓有01班</span>
                    <i></i>
                </div>
                班级列表
                <div class="class-list">
                    <ul>
                        <li>
                            <a class='clearfix' href="#">
                                编号
                                <i class='fl'><span>01</span></i>
                                头像
                                <div class="photo fl"></div>
                                昵称
                                <span class='nickname'>夏添</span>
                                行业
                                <span class='job'>新能源开发与时长推广</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </li>
            <li>
                <div class="class-title">
                    <span>郑州卓有01班</span>
                    <i></i>
                </div>
                班级列表
                <div class="class-list">
                    <ul>
                        <li>
                            <a class='clearfix' href="#">
                                编号
                                <i class='fl'><span>01</span></i>
                                头像
                                <div class="photo fl"></div>
                                昵称
                                <span class='nickname'>夏添</span>
                                行业
                                <span class='job'>新能源开发与时长推广</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </li> -->
        </ul>
    </div>
</div>

<!-- 移动端适配 -->
<script src="./js/flexible.js"></script>
<script src="./js/time-filter.js"></script>
<script src="./js/mui-3.7.2.js"></script>
<script src="./js/jquery.js"></script>
<script src="./js/index.js"></script>
<script src="./js/ajax.js"></script>
<script>
    var getParams =function(data){
        var passData = JSON.parse(data);
        //获取学员所在班级列表
        getClassList(
            {
                studentId: passData.studentId
            },
            function (res) {
                console.log(res);
                //添加班级列表
                for (var i = 0; i < res.data.length; i++) {
                    var data = res.data[i];
                    $('.content>ul').append(
                        '<li>'
                        + '	<div class="class-title">'
                        + '		<span>' + data.className + '</span>'
                        + '		<i></i>'
                        + '	</div>'
                        + '	<div class="class-list">'
                        + '		<ul>'
                        + '		</ul>'
                        + '	</div>'
                        + '</li>'
                    );
                }
                //填充每个班级的成员
                var classList = $('.content>ul li');
                console.log(classList);
                for (var i = 0; i < classList.length; i++) {
                    for (var j = 0; j < res.data[i].studentList.length; j++) {
                        var data = res.data[i].studentList[j];
                        $('.content>ul li').eq(i).find('.class-list>ul').append(
                            '<li>'
                            + '	<a class="clearfix" href="#">'
                            + '		<!-- 编号 -->'
                            + '		<i class="fl"><span>' + data.studentId + '</span></i>'
                            + '		<!-- 头像 -->'
                            + '		<div class="photo fl"></div>'
                            + '		<!-- 昵称 -->'
                            + '		<span class="nickname">' + data.nickname + '</span>'
                            + '	</a>'
                            + '</li>'
                        );
                    }
                }
                /*点击显示隐藏班级里列表*/
                $('.class-title').on('click', function () {
                    console.log('111');
                    $(this).next('div').slideToggle();
                    $(this).find('i').toggleClass('active');
                });
            }
        );
    }
</script>
<script src="./js/my-class.js"></script>
</body>
</html>
